<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS -->
    <link
      rel="stylesheet"
      href="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./style3.css" />
  </head>

  <body>
    <!-- 搜素框 banner -->
    <div class="search-banner">
      <div
        class="w mx-auto h-100 d-flex justify-content-between align-items-center"
      >
        <h1 class="align-self-end" id="Sub">Subscribe | About</h1>
        <img src="images2/WechatIMG22_03.gif" id="search" />
      </div>
    </div>

    <!-- LOGO -->
    <div
      class="logo w d-flex justify-content-between align-items-center"
      style="height: 60px"
    >
      <img src="images2/WechatIMG22_34.gif" id="logo" />
      <p class="align-self-end d-none d-md-block" id="Tec">
        Technology | Design | Strategy
      </p>
    </div>

    <!-- 广告区域 -->
    <!-- 第一栏 -->
    <div class="w mx-auto text-center">
      <div class="row g-2 row-cols-2 row-cols-md-4 mx-0">
        <!-- 左侧 -->
        <div class="col-12 col-md-6">
          <div
            class="d-flex justify-content-between"
            style="height: 205px; background-color: #cb0001"
          >
            <img
              class="align-self-end mx-auto"
              src="images2/WechatIMG22_14.gif"
              id="AAA"
            />
            <img src="images2/WechatIMG22_11.gif" id="AAA2" />
          </div>
        </div>

        <!-- 中间 -->
        <div class="col">
          <div>
            <div
              class="d-flex flex-column justify-content-between"
              style="height: 205px"
            >
              <div class="snap" style="border: 1px solid #a9ccde">
                <img src="images2/WechatIMG2627.jpg" width="202" />
                <p class="text-left px-2 mb-0">
                  <span>Hot topics</span> Mobile, iPad, Touch, New and Emerging
                  Technologies, Android, iOS, Tablet, Design, Interface
                  design,Psychology, Usability, Web
                </p>
              </div>

              <div class="connted" style="width: 202px">
                <p style="font-size: 15pt">STAY CONNECTED</p>
                <p style="font-size: 6pt">
                  Keep up to Date With the Best UX Resources
                </p>
                <p>Twitter | Facebook | Email | RSS</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="col">
          <div class="does position-relative" style="height: 205px">
            <div class="position-absolute">
              <p style="color: white">
                Does your company need a mobile application?
              </p>
              <p style="color: #cc7a63">
                Leam the top five things to consider.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二栏 -->
    <div class="w mx-auto text-center mt-1">
      <div class="row row-cols-1 row-cols-md-2 g-2">
        <!-- 第二栏左侧 -->
        <div class="second-right col">
          <div class="row row-cols-4 g-1">
            <div class="col-6">
              <div
                class="height-100 px-2 text-left"
                style="background-color: #cb0001; font-size: 8pt; color: white"
              >
                An interview with Sylvia Veitia of AAA about how customer
                experience trends are affecting the company.CONTINUED..
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col-9">
              <div class="border-solid height-100">
                <div class="position-relative more">
                  <img
                    class="position-absolute"
                    src="images2/WechatIMG2629.jpg"
                    width="45px"
                    height="40px"
                    border="0px"
                    id="more"
                  />
                  <p>Oct07 Playing in the Sandbox</p>
                  <p>Oct05 The Invisibility of Disability</p>
                  <p>Sep30 Everyone Forgets Memory</p>
                  <p>View all past articles.</p>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="border-solid box">
                <p>IN STRATEGY</p>
                <p>Treating Users as Customers</p>
                <p>
                  Designers need to think beyond just the user's journey to
                  consider the experience of being a customer.
                </p>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div
                class="border-solid height-100 position-relative"
                style="box-sizing: border-box; border: 5px solid #cb0001"
              >
                <img src="images2/WechatIMG22_35.gif" />
                <p class="text-left" style="font-size: 6pt; margin-left: 10px">
                  © 2010 UX Magazine. For all inquires, see our
                  <span style="color: #a9ccde; text-decoration: underline"
                    >'About'</span
                  >
                  page.
                </p>
                <img
                  class="position-absolute bottom-0"
                  style="left: 55px"
                  src="images2/WechatIMG22_31.gif"
                />
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="what px-2 text-left">
                <h1 class="mb-0" id="WHAT">WHAT?</h1>
                <p id="what">
                  UX Magazine publishes high-guslity, cursted articles that helo
                  to both define and inform the field of user experience (UX).
                  New articles are published frequently and continuously.geared
                  toward UX ore citioners businesspeople, and newcomers of any
                  level of experience.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二栏右侧 -->
        <div class="second-right col">
          <div class="row row-2 g-1">
            <!-- 第二栏右侧左边 -->
            <div class="col-6">
              <div class="row row-2 g-1">
                <div class="col-12">
                  <div class="large height-100">
                    <p class="p-2 text-left" id="large">
                      A large part of game play is about friction and overcoming
                      challenges--which is a very different kind of Ul problem
                      than we deal with in web applications.
                    </p>
                    <p class="text-left" style="font-size: 6pt">
                      Daniel Burka-「Listen to the Interview」
                    </p>
                  </div>
                </div>
                <div class="col">
                  <div class="border-solid box">
                    <p>IN STRATEGY</p>
                    <p>Treating Users as Customers</p>
                    <p>
                      Designers need to think beyond just the user's journey to
                      consider the experience of being a customer.
                    </p>
                  </div>
                </div>
                <div class="col">
                  <div>
                    <img
                      src="images2/WechatIMG22_23.gif"
                      width="100px"
                      height="100px"
                      border="0px"
                    />
                  </div>
                </div>
                <div class="col">
                  <div class="border-solid box">
                    <p>IN STRATEGY</p>
                    <p>Treating Users as Customers</p>
                    <p>
                      Designers need to think beyond just the user's journey to
                      consider the experience of being a customer.
                    </p>
                  </div>
                </div>
                <div class="col">
                  <div class="border-solid box">
                    <p>IN STRATEGY</p>
                    <p>Treating Users as Customers</p>
                    <p>
                      Designers need to think beyond just the user's journey to
                      consider the experience of being a customer.
                    </p>
                  </div>
                </div>
                <div class="col">
                  <div class="border-solid box">
                    <p>IN STRATEGY</p>
                    <p>Treating Users as Customers</p>
                    <p>
                      Designers need to think beyond just the user's journey to
                      consider the experience of being a customer.
                    </p>
                  </div>
                </div>
                <div class="col">
                  <div class="border-solid box">
                    <p>IN STRATEGY</p>
                    <p>Treating Users as Customers</p>
                    <p>
                      Designers need to think beyond just the user's journey to
                      consider the experience of being a customer.
                    </p>
                  </div>
                </div>
                <div class="col-12">
                  <div class="col-12 col-md-6">
                    <div class="what px-2 text-left">
                      <h1 class="mb-0" id="WHAT">WHO?</h1>
                      <p id="what">
                        UX Magazine publishes high-guslity, cursted articles
                        that helo to both define and inform the field of user
                        experience (UX). New articles are published frequently
                        and continuously.geared toward UX ore citioners
                        businesspeople, and newcomers of any level of
                        experience.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 第二栏右侧右边 -->
            <div class="col-6">
              <div class="short p-1 border-solid">
                <h1>Our bitesized update.</h1>
                <img src="images2/WechatIMG2624.jpg" />
                <div class="short-card">
                  <p>The Pretty Speedy Redesign</p>
                  <p>1 week ago</p>
                </div>
                <div class="short-card">
                  <p>UX, Bathrooms, and Mad Men</p>
                  <p>4 week ago</p>
                </div>
                <div class="short-card">
                  <p>
                    Announcing the winners of the"Simple and Usable" book
                    givaway
                  </p>
                  <p>6 week ago</p>
                </div>
                <div class="short-card">
                  <p>"Designing the iPhone User Experience" book givaway</p>
                  <p>7 week ago</p>
                </div>
                <div class="short-card">
                  <p>Win a copy of "Simple and Usable"</p>
                  <p>8 week ago</p>
                </div>
                <div class="short-card">
                  <p>Can Experience Be Designed?</p>
                  <p>9 week ago</p>
                </div>
                <div class="short-card">
                  <p>Win a copy of "Designing the iPhone User Experience"</p>
                  <p>9 week ago</p>
                </div>
                <div class="short-card">
                  <p>
                    Apple (finally) releases its App Store Review Guidelines
                  </p>
                  <p>10 week ago</p>
                </div>
                <div class="short-card">
                  <p>"Remote Research" Book Giveaway Winners Announced</p>
                  <p>18 week ago</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="w mx-auto bottom text-center mt-4">
      <div class="d-flex justify-content-between">
        <div style="font-size: 7pt;">©2010 UX Magazine</div>
        <div style="font-size: 7pt;">
          Content is licensed under Creative Commons
          Attribution-NonCommercial-ShareAlike.
        </div>
      </div>
    </div>
  </body>

  <script src="./bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
</html>
